// index.js
import common from '../../common/compents.js';
import Toast from '@vant/weapp/toast/toast';
import * as echarts from '../ec-canvas/echarts.js';
import Dialog from '@vant/weapp/dialog/dialog';
// 获取应用实例
const App = getApp();
let oneComponent = null,
  myMap, myOptions;
Page({
  data: {
    canvasSrc: './test.jpg',
    /*是否显示临时图片*/
    isShowSrc: 0,
    /*临时图片路径*/
    tempImg: '',
    pagePower: true,
    animationData: {},
    checked: true,
    supplierInfo: {
      sale_total: 0,
      sale_ratio: 0,
      sale_rank: 0
    },
    incrText: "增长",
    supplierSummaryInfo: {
      main_cate: {
        name: "--",
        rank: 0
      },
      best_rank: {
        goods_name: "--",
        sale_total: 0,
        all_rank: 0,
        cate_name: "--",
        cate_rank: 0,
        goods_id: 0
      },
      best_incr: {
        goods_name: "--",
        incr_rate: "--",
        goods_id: 0
      },
      sale_abnormal: {
        decr_count: 0,
        incr_count: 0
      },
      stock_warning: {
        ratio: "--",
        total: 0,
      }
    },
    goodsList: [],
    chartList: [],
    onInitChart: null,
    canvasHeight: 0,
    ecChart: {
      lazyLoad: true //设置图表懒加载
    },
    chartSrc: '',
    src: '',
    src1: '',
    width: 0,
    height: 0,
    shareShow: false,
    isIossystem: false,
  },
  // 数据获取
  getData() {
    let _token = wx.getStorageSync('token'),
      _obj = JSON.parse(wx.getStorageSync('currentOrganize')),
      date_type = this.data.checked ? 1 : 2,
      period = this.data.checked ? common.beforeDate().replace(/-/g, '') : common.weekDate().weekth,
      start_date = this.data.checked ? common.beforeDate().replace(/-/g, '') : common.weekDate().start.replace(/-/g, ''),
      that = this;
    wx.request({
      url: App.globalData.testApi + '/wechat/index/index',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        "token": _token
      },
      data: {
        supplier_id: _obj.supplier_id,
        organization_id: _obj.organization_id,
        period: period,
        date_type: date_type,
        start_date: start_date
      },
      success(resapi) {
        if (resapi.data.code == 0) {
          let _data = resapi.data.data.sale_total_list.reverse();
          that.setData({
            pagePower: true,
            supplierInfo: resapi.data.data.supplier_info,
            goodsList: resapi.data.data.goods_rank,
            chartList: _data,
          })
          that.initIndex();
          that.setData({
            supplierSummaryInfo: resapi.data.data.supplier_summary_info,
          })
        } else if (resapi.data.code == 1008) {
          common.reLogin();
        } else if (resapi.data.code == 1009) {
          that.setData({
            pagePower: false
          });
        } else {
          Toast(resapi.data.message)
        }
      },
      fail(resapi) {
        console.log('失败', resapi);
        Toast("网络请求失败！");
      },
      complete(resapi) {
        wx.hideLoading();
      }
    })
  },
  // init图表
  initIndex() {
    oneComponent = this.selectComponent('#indexCanvas');
    let that = this,
      _arr1 = [],
      _arr2 = [];
    this.data.chartList.map((value, key) => {
      _arr1.push(value.date);
      _arr2.push(value.value);
    })
    oneComponent.init((canvas, width, height, dpr) => {
      myMap = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(myMap);
      const option = {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: ['#437AE7'],
        grid: {
          show: false,
          left: '3%',
          right: '4%',
          bottom: 5,
          top: 0,
          containLabel: false
        },
        xAxis: [{
          show: false,
          type: 'category',
          data: _arr1,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          show: false,
          type: 'value',
        }],
        series: [{
          name: '销售指数',
          type: 'bar',
          barWidth: 20,
          data: _arr2
        }]
      };
      myOptions = option;
      myMap.setOption(option);
      return myMap
    });
  },
  // 跳转商品详情
  onClick(e) {
    common.toDetail(e.currentTarget.dataset.id)
  },
  // 切换昨日和上周
  dateChange(e) {
    // 需要手动对 checked 状态进行更新
    wx.showLoading({
      mask: true
    })
    this.setData({
      checked: e.detail
    });
    this.getData();
  },
  touchMove() {
    var animation = wx.createAnimation({
      duration: 500
    })
    animation.translateX('80rpx').step();
    this.setData({
      animationData: animation.export()
    });
  },
  touchCancel() {
    var animation = wx.createAnimation({
      duration: 500
    })
    animation.translateX('0').step();
    this.setData({
      animationData: animation.export()
    });
  },
  touchEnd() {
    var animation = wx.createAnimation({
      duration: 500
    })
    animation.translateX('0').step();
    this.setData({
      animationData: animation.export()
    });
  },
  onPageScroll: function (e) {
    let that = this;
    var animation = wx.createAnimation({
      duration: 500
    })
    animation.translateX('80rpx').step();
    this.setData({
      animationData: animation.export()
    });
    setTimeout(() => {
      var animation = wx.createAnimation({
        duration: 500
      })
      animation.translateX('0').step();
      this.setData({
        animationData: animation.export()
      });
    }, 2000)
  },
  // 生成画报
  renderCanvas() {
    // console.log(111);
    this.setData({
      shareShow: false
    })
    wx.showLoading({
      mask: false,
      title: "数据画报生成中"
    })
    let that = this;
    let componentId = "#indexCanvas";
    let width, height, destWidth, destHeight;

    // 获取canvas高度
    if (this.data.chartList.length > 0) {
      const query = wx.createSelectorQuery()
      query.select(componentId).boundingClientRect()
      query.exec(function (rects) {
        rects.forEach(function (rect, n) {
          width = rect.width;
          height = rect.height;
          destWidth = rect.width;
          destHeight = rect.height;
          console.log(111, destHeight)
        })
        myMap.on("finished", () => {
          console.log("开始转换")
          console.log(555, that.selectComponent(componentId).canvasToTempFilePath)

          that.selectComponent(componentId).canvasToTempFilePath({
            x: 0,
            y: 0,
            width,
            height,
            // 截取canvas的宽度
            destWidth,
            // 截取canvas的高度    
            destHeight,
            success: res => {
              console.log("转换图片成功", res.tempFilePath)
              that.setData({
                chartSrc: res.tempFilePath,
              })
            },
            fail: res => {
              console.log("转换图片失败", res)
            },
            complete: res => {
              console.log("转换动作结束", res)
              // canvas 画图
              that.canvasHtml();
            }
          });
        });
        myMap.setOption(myOptions);
      })
    } else {
      // canvas 画图
      that.canvasHtml();
    }
  },
  canvasHtml() {
    this.widget = this.selectComponent('.widget');
    let wxml = '',
      _obj = {},
      that = this,
      _title = JSON.parse(wx.getStorageSync('currentOrganize')),
      _info = JSON.parse(wx.getStorageSync('initInfo'));
    wxml += `
      <view class="canvas-content">
        <view class="liubai"></view>`;
    wxml += `<view class="head">
              <text class="sjjb">数据简报</text>`
    if (_title.organization_name.length < 20) {
      wxml += `<text class="orgtitle">` + _title.organization_name + `</text>`;
    } else {
      wxml += `<text class="orgtitle">` + _title.organization_name.slice(0, 17) + '...' + `</text>`
    }
    wxml += `</view>`;
    // wxml += `<view class="account">
    //           <text class="you">由</text>
    //           <text class="mingzi">` + _info.account + `分享</text>
    //         </view>`;
    if (this.data.checked) {
      wxml += `<text class="zrxs">昨日简报</text>`;
    } else {
      wxml += `<text class="zrxs">上周简报</text>`;
    }
    if (this.data.pagePower) {
      wxml += `<view class="one">
                <text class="title">本社销售指数</text>
                <text class="title">市场占有率</text>
                <text class="title">行业排名</text>
              </view>`
      wxml += `<view class="two">
                <text class="num">` + this.data.supplierInfo.sale_total + `</text>
                <text class="num">` + this.data.supplierInfo.sale_ratio + `%</text>
                <text class="num">` + this.data.supplierInfo.sale_rank + `</text>
              </view>`
      if (this.data.chartList.length > 0) {
        wxml += `<image class="chartimage" src="` + this.data.chartSrc + `"></image>`
      } else {
        wxml += `<text class="nodata">暂无图表数据</text>`
      }
      wxml += `<view class="three">
              <view class="row"></view>
              <text class="zai">最佳类目</text>`
      if (this.data.supplierSummaryInfo.main_cate.name.length < 5) {
        wxml += `<view class="block rc"><text class="cate">` + this.data.supplierSummaryInfo.main_cate.name + `</text></view>`
      } else if (this.data.supplierSummaryInfo.main_cate.name.length >= 5 && this.data.supplierSummaryInfo.main_cate.name.length < 7) {
        wxml += `<view class="block rc width3"><text class="cate width3">` + this.data.supplierSummaryInfo.main_cate.name + `</text></view>`
      } else if (this.data.supplierSummaryInfo.main_cate.name.length >= 7 && this.data.supplierSummaryInfo.main_cate.name.length < 9) {
        wxml += `<view class="block rc width4"><text class="cate width4">` + this.data.supplierSummaryInfo.main_cate.name + `</text></view>`
      } else if (this.data.supplierSummaryInfo.main_cate.name.length >= 9 && this.data.supplierSummaryInfo.main_cate.name.length < 11) {
        wxml += `<view class="block rc width5"><text class="cate width5">` + this.data.supplierSummaryInfo.main_cate.name + `</text></view>`
      } else if (this.data.supplierSummaryInfo.main_cate.name.length >= 11 && this.data.supplierSummaryInfo.main_cate.name.length <= 13) {
        wxml += `<view class="block rc width6"><text class="cate width6">` + this.data.supplierSummaryInfo.main_cate.name + `</text></view>`
      } else if (this.data.supplierSummaryInfo.main_cate.name.length > 13) {
        wxml += `<view class="block rc width6"><text class="cate width6">` + this.data.supplierSummaryInfo.main_cate.name.slice(0, 13) + '...' + `</text></view>`
      }
      wxml += `<text class="leimu">，类目排名第</text>`
      if (this.data.supplierSummaryInfo.main_cate.rank > 100) {
        wxml += `<view class="block ra width2"><text class="rank width2">` + this.data.supplierSummaryInfo.main_cate.rank + `</text></view>`
      } else {
        wxml += `<view class="block ra"><text class="rank">` + this.data.supplierSummaryInfo.main_cate.rank + `</text></view>`
      }
      wxml += `<text class="wei">位</text>
            </view>`;
      wxml += `<view class="three huan">
            <view class="row"></view><text class="zai">最佳品种</text>`
      if (this.data.supplierSummaryInfo.best_rank.goods_name.length < 7) {
        wxml += `<view class="block rn"><text class="goods">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 7 && this.data.supplierSummaryInfo.best_rank.goods_name.length < 9) {
        wxml += `<view class="block rn width5"><text class="goods width5">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 9 && this.data.supplierSummaryInfo.best_rank.goods_name.length < 11) {
        wxml += `<view class="block rn width9"><text class="goods width9">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 11 && this.data.supplierSummaryInfo.best_rank.goods_name.length < 13) {
        wxml += `<view class="block rn width11"><text class="goods width11">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 13 && this.data.supplierSummaryInfo.best_rank.goods_name.length < 15) {
        wxml += `<view class="block rn width13"><text class="goods width13">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 15 && this.data.supplierSummaryInfo.best_rank.goods_name.length < 18) {
        wxml += `<view class="block rn width15"><text class="goods width15">` + this.data.supplierSummaryInfo.best_rank.goods_name + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      } else if (this.data.supplierSummaryInfo.best_rank.goods_name.length >= 18) {
        wxml += `<view class="block rn width16"><text class="goods width16">` + this.data.supplierSummaryInfo.best_rank.goods_name.slice(0, 15) + '...》' + `</text></view>
            <text class="leimu">总计销售指数为</text>`
      }
      if (this.data.supplierSummaryInfo.best_rank.sale_total < 9999) {
        wxml += `<view class="block rs width2"><text class="sale width2">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      } else if (this.data.supplierSummaryInfo.best_rank.sale_total <= 99999 && this.data.supplierSummaryInfo.best_rank.sale_total > 10000) {
        wxml += `<view class="block rs width3"><text class="sale width3">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      } else if (this.data.supplierSummaryInfo.best_rank.sale_total <= 999999 && this.data.supplierSummaryInfo.best_rank.sale_total > 100000) {
        wxml += `<view class="block rs width4"><text class="sale width4">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      } else if (this.data.supplierSummaryInfo.best_rank.sale_total <= 9999999 && this.data.supplierSummaryInfo.best_rank.sale_total > 1000000) {
        wxml += `<view class="block rs width5"><text class="sale width5">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      } else if (this.data.supplierSummaryInfo.best_rank.sale_total <= 9999999 && this.data.supplierSummaryInfo.best_rank.sale_total > 1000000) {
        wxml += `<view class="block rs width6"><text class="sale width6">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      } else if (this.data.supplierSummaryInfo.best_rank.sale_total <= 9999999 && this.data.supplierSummaryInfo.best_rank.sale_total > 1000000) {
        wxml += `<view class="block rs width7"><text class="sale width7">` + this.data.supplierSummaryInfo.best_rank.sale_total + `</text></view>`
      }
      wxml += `<text class="zong">，位于总榜第</text>`
      if (this.data.supplierSummaryInfo.best_rank.all_rank < 1000) {
        wxml += `<view class="block ra"><text class="rank">` + this.data.supplierSummaryInfo.best_rank.all_rank + `</text></view>`
      } else {
        wxml += `<view class="block ra width2"><text class="rank width2">` + this.data.supplierSummaryInfo.best_rank.all_rank + `</text></view>`
      }
      wxml += `<text class="wei">位</text>
          </view>`;
      wxml += `<view class="three huan">
          <view class="row"></view>
          <text class="zai">销量异动</text>`
      wxml += `<view class="block rq width3"><text class="cate red width3">` + this.data.supplierSummaryInfo.sale_abnormal.incr_count + `个品种</text></view>`;
      wxml += `<text class="leimu">销量异常增长，</text>`
      wxml += `<view class="block ri width3"><text class="incr green width3">`;
      wxml += this.data.supplierSummaryInfo.sale_abnormal.decr_count + `个品种</text></view><text class="xiajiang">销量异</text><text class="xiajiang">常下降</text>
        </view>`;
      wxml += `<view class="three huan">
        <view class="row"></view>
        <text class="zai">库存预警</text>`;
      wxml += `<view class="block ra stockwidth"><text class="cate stockwidth">` + this.data.supplierSummaryInfo.stock_warning.total + `</text></view>`;
      wxml += `<text class="zhixiao">个品种库存紧张，滞销品种库存码洋占总量</text>`
      wxml += `<view class="block rq width2"><text class="incr red width3">`;
      wxml += this.data.supplierSummaryInfo.stock_warning.ratio + `</text></view>
      </view>`;
    } else {
      wxml += `<text class="nodata1">暂无权限</text>`
    }
    wxml += `<view class="greyblock"></view>`;
    if (this.data.checked) {
      wxml += `<text class="zrxs">昨日销售排行</text>`
    } else {
      wxml += `<text class="zrxs">上周销售排行</text>`
    }
    wxml += `<view class="three zs">
              <text class="tushu">图书信息</text>
              <text class="tushu">销售指数</text>
            </view>`
    if (this.data.pagePower) {
      if (this.data.goodsList.length > 0) {
        let goodsArr = this.data.goodsList.slice(0, 10);
        for (let i = 0; i < goodsArr.length; i++) {
          wxml += `<view class="three xiao">
                    <text class="paiming">` + goodsArr[i].sale_rank + `</text>`;
          if (goodsArr[i].cover_pic) {
            let _src = goodsArr[i].cover_pic;
            if (_src.indexOf('https:') > -1) {
              _src = goodsArr[i].cover_pic;
            } else {
              _src = goodsArr[i].cover_pic.replace(/http/, 'https');
            }
            wxml += `<image class="cover" src="` + _src + `"></image>`
          } else {
            wxml += `<view class="no-image"></view>`
          }
          if (goodsArr[i].goods_name.length > 18) {
            wxml += `<text class="goodsname">` + goodsArr[i].goods_name.slice(0, 18) + '...' + `</text>`
          } else {
            wxml += `<text class="goodsname">` + goodsArr[i].goods_name + `</text>`
          }
          wxml += `<text class="saletotal">` + goodsArr[i].sale_total + `</text>
                  </view>`
        }
      } else {
        wxml += `<text class="nodata2">暂无数据</text>`
      }
    } else {
      wxml += `<text class="nodata2">暂无权限</text>`
    }
    wxml += `<view class="zhichi">
              <image class="ercode" src="https://bodao.mhuoba.com/static/wximages/ercode.png"></image>
              <text class="jishu">博道出版数据实验室提供技术支持</text>
            </view>`;
    wxml += `</view>`;
    let style = {
      canvasContent: {
        backgroundColor: '#FFF',
        width: 375,
        height: 1220,
        padding: 10,
      },
      liubai: {
        width: 355,
        height: 30
      },
      head: {
        width: 355,
        height: 23,
        flexDirection: 'row',
        alignItems: 'center'
      },
      sjjb: {
        width: 68,
        height: 23,
        fontSize: 16,
        color: '#07193F',
      },
      orgtitle: {
        width: 280,
        height: 18,
        fontSize: 12,
        color: '#07193F',
        marginLeft: 5
      },
      account: {
        width: 355,
        height: 18,
        fontSize: 12,
        color: '#7789AF',
        flexDirection: 'row',
        marginTop: 10
      },
      you: {
        width: 12,
        height: 18,
      },
      mingzi: {
        width: 335,
        height: 18,
      },
      img1: {
        width: 355,
        height: 18,
      },
      one: {
        width: 355,
        height: 20,
        flexDirection: 'row',
        marginTop: 15
      },
      title: {
        width: 118,
        height: 20,
        fontSize: 12,
        color: '#7789AF'
      },
      two: {
        width: 355,
        height: 23,
        flexDirection: 'row',
      },
      num: {
        width: 118,
        height: 23,
        fontSize: 16,
        color: '#07193F'
      },
      chartimage: {
        width: 355,
        height: 110,
        marginTop: 15,
        marginBottom: 15
      },
      three: {
        width: 355,
        height: 26,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 2
      },
      huan: {
        height: 52,
        flexWrap: 'wrap'
      },
      row: {
        width: 3,
        height: 11,
        backgroundColor: '#1754D2',
        marginRight: 5
      },
      block: {
        height: 22,
        borderRadius: 5,
        backgroundColor: '#F4F7FD',
        marginRight: 3,
        paddingTop: 3,
        marginBottom: 3
      },
      rc: {
        width: 60
      },
      cate: {
        width: 60,
        height: 18,
        fontSize: 12,
        color: '#07193F',
        textAlign: 'center'
      },
      rank: {
        width: 30,
        height: 18,
        fontSize: 12,
        color: '#07193F',
        textAlign: 'center'
      },
      ra: {
        width: 30
      },
      rn: {
        width: 80,
        paddingLeft: 3,
        paddingRight: 3
      },
      goods: {
        width: 80,
        height: 18,
        fontSize: 12,
        color: '#07193F',
        textAlign: 'center'
      },
      rs: {
        width: 70
      },
      sale: {
        width: 70,
        height: 18,
        fontSize: 12,
        color: '#07193F',
        textAlign: 'center'
      },
      zai: {
        width: 50,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      leimu: {
        width: 89,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      wei: {
        width: 16,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      zong: {
        width: 74,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      ri: {
        width: 60,
        backgroundColor: '#ddf1e4',
      },
      rq: {
        width: 60,
        backgroundColor: '#f9dfde',
      },
      incr: {
        width: 60,
        height: 18,
        fontSize: 12,
        textAlign: 'center'
      },
      green: {
        color: '#57B878'
      },
      red: {
        color: '#E36E5C'
      },
      zhouqi: {
        width: 90,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      xiajiang: {
        width: 40,
        height: 18,
        fontSize: 12,
        color: '#7789AF',
        textAlign: 'center'
      },
      zhixiao:{
        width: 230,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      greyblock: {
        width: 375,
        height: 4,
        backgroundColor: '#F4F7FD',
        marginLeft: -10,
        marginTop: 15
      },
      zrxs: {
        width: 355,
        height: 20,
        fontSize: 14,
        color: '#07193F',
        marginTop: 15
      },
      zs: {
        justifyContent: 'space-between'
      },
      tushu: {
        width: 48,
        height: 18,
        fontSize: 12,
        color: '#7789AF'
      },
      xiao: {
        height: 39,
        marginBottom: 10
      },
      paiming: {
        width: 32,
        height: 18,
        fontSize: 12,
        color: '#07193F'
      },
      cover: {
        width: 36,
        height: 36,
      },
      noImage: {
        width: 36,
        height: 36,
        backgroundColor: '#D1DDF6'
      },
      goodsname: {
        width: 220,
        height: 20,
        fontSize: 12,
        color: '#07193F',
        flexWrap: 'wrap',
        marginLeft: 5
      },
      saletotal: {
        width: 67,
        height: 20,
        fontSize: 14,
        color: '#7789AF',
        textAlign: 'right'
      },
      nodata1: {
        width: 355,
        height: 300,
        lineHeight: 300,
        color: '#7789AF',
        fontSize: 12,
        textAlign: 'center',
      },
      nodata: {
        width: 355,
        height: 100,
        lineHeight: 100,
        color: '#7789AF',
        fontSize: 12,
        textAlign: 'center',
      },
      nodata2: {
        width: 355,
        height: 500,
        lineHeight: 500,
        color: '#7789AF',
        fontSize: 12,
        textAlign: 'center',
      },
      zhichi: {
        width: 355,
        height: 78,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: "center",
        marginTop: 20
      },
      ercode: {
        width: 48,
        height: 48,
      },
      jishu: {
        width: 180,
        height: 18,
        color: '#07193F',
        fontSize: 12,
        marginLeft: 15
      },
      stockwidth:{
        width:40
      },
      width1: {
        width: 30
      },
      width2: {
        width: 60
      },
      width3: {
        width: 70
      },
      width4: {
        widht: 80
      },
      width5: {
        widht: 90
      },
      width6: {
        width: 100
      },
      width7: {
        width: 110
      },
      width8: {
        width: 120
      },
      width9: {
        width: 130
      },
      width10: {
        width: 140
      },
      width11: {
        width: 150
      },
      width12: {
        width: 160
      },
      width13: {
        width: 170
      },
      width14: {
        width: 180
      },
      width15: {
        width: 190
      },
      width16: {
        width: 200
      }
    }
    _obj = {
      wxml: wxml,
      style: style,
    }
    console.log(22, {
      wxml,
      style
    });
    console.log('widget', this.widget, this.widget1)
    const p1 = this.widget.renderToCanvas(_obj)
    p1.then((res) => {
      // console.log('canvasContent', res)
      this.canvasContent = res
      wx.hideLoading();
      Dialog.confirm({
          title: '',
          message: '画报生成成功，是否保存至手机相册',
        })
        .then(() => {
          // on confirm
          that.extraImage();
        })
        .catch(() => {
          // on cancel
        });
    })
  },
  extraImage() {
    let that = this;
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      console.log('最后1', res.tempFilePath)
      that.setData({
        src: res.tempFilePath,
        width: this.canvasContent.layoutBox.width,
        height: this.canvasContent.layoutBox.height
      })
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          console.log('保存图片成功', res)
          Toast('成功保存至手机相册！')
        },
        fail(res) {
          console.log('保存图片失败', res)
          Toast('保存至手机相册失败！')
        },
        complete(res) {
          console.log('保存图片动作结束', res)
          wx.hideLoading();
        }
      })
    })
  },
  onLoad() {
    // this.widget = this.selectComponent('.widget');
    // console.log('onload',this.widget)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // console.log(this.widget)
    if (wx.getStorageSync("token")) {
      let _title = JSON.parse(wx.getStorageSync('currentOrganize')),
        that = this;
      wx.setNavigationBarTitle({
        title: _title.organization_name,
      })
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
      wx.showLoading({
        mask: true
      })
      this.getData();
    } else {
      wx.reLaunch({
        url: '/pages/login/index'
      })
    }
  },
  onHide: function () {

  },
  onReady: function () {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    wx.hideLoading();
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    this.setData({
      shareShow: false
    })
    return {
      title: "博道出版数据实验室",
    }
  }
})